<template>
  <div class="container">
    <div class="left">
      <div
        class="nl-item"
        @click="checkRow(item)"
        :class="{ 'gj-item-active': gjmc === item.gjmc }"
        v-for="item in gjflList"
        :key="item.id"
      >
        <div>
          <el-row>
            <el-col :span="4">
              <div class="img"></div>
            </el-col>
            <el-col :span="19">
              <div class="gjmc" :title="item.gjmc">{{ item.gjmc }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="wljcBox" v-if="this.gjmc == '网络检测' ? true : false">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="PING检测" name="first">
            <div class="dkjcBox">
              <el-form ref="wlForm" :model="wlForm" label-width="70px">
                <!-- <el-row :gutter="10">
                  <el-col :span="12">
                    <el-input v-model="wlForm.filter.gjc" clearable placeholder="请输入检索能力名称或ip地址"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary" @click="wlSubmit">立即查询</el-button>
                  </el-col>
                </el-row>-->

                <el-row :gutter="10" style="margin-top:10px">
                  <el-col :span="12">
                    <el-select
                      style="width:100%"
                      v-model="wlSelectData"
                      filterable
                      :filter-method="wlFilter"
                      remote
                      placeholder="请输入"
                    >
                      <el-option
                        v-for="item in wlSelectList"
                        :key="item.jkbh"
                        :label="item.jkmc"
                        :value="item.jkbh"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <!--  -->
                    <el-button type="primary" @click="getPingStatus">立即检测</el-button>
                  </el-col>
                </el-row>
              </el-form>
              <div class="bottom">
                <p>检测结果：</p>
                <el-input
                  type="textarea"
                  placeholder="请检测"
                  :rows="6"
                  v-model="wlTextarea"
                  :disabled="true"
                ></el-input>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="端口检测" name="second">
            <div class="dkjcBox">
              <el-form ref="dkForm" :rules="dkFormRules" :model="dkForm" label-width="70px">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <el-form-item label="ip地址:" prop="ipdz">
                      <el-input v-model="dkForm.ipdz" placeholder="请输入ip地址" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="端口号:" prop="dkh">
                      <el-input v-model="dkForm.dkh" placeholder="请输入端口号" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary" @click="dkSubmit">立即检测</el-button>
                  </el-col>
                </el-row>
              </el-form>
              <div class="bottom">
                <p>检测结果：</p>
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="请检测"
                  v-model="dkTextarea"
                  :disabled="true"
                ></el-input>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="bzwdBox" v-if="this.gjmc == '帮助文档' ? true : false">
        <el-form ref="wjForm" :rules="wjFormRules" :model="wjForm" label-width="70px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="文件名">
                <el-input v-model="wjForm.filter.gjc" placeholder="请输入文件名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2.5">
              <el-button type="primary" @click="wjSubmit">搜索</el-button>
            </el-col>
            <el-col :span="2.5">
              <!-- :limit="1" -->
              <el-upload
                accept=".xlsx, .pdf, .doc, .docx, .xls, .rar, .zip, .png, .jpg, .jepg"
                class="upload-demo"
                :action="upload.url"
                :headers="upload.headers"
                multiple
                :on-success="handleFileSuccess"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">上传文件</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form>

        <div class="tableBox">
          <el-table :data="tableData" border stripe height="380">
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="wjmc" label="	文档名称" align="center" :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column
              prop="wjbh"
              label="文件编号	"
              align="center"
              :show-overflow-tooltip="true"
            ></el-table-column>-->
            <el-table-column
              prop="fbrymc"
              label="	发布人"
              align="center"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column prop="fbrq" label="发布日期" align="center" :show-overflow-tooltip="true"></el-table-column>

            <el-table-column label="操作" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-link type="primary" @click="handleXz(scope.row)">下载</el-link>
                <el-link type="primary" v-if="scope.row.isDelete" @click="handleSc(scope.row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              background
              @size-change="changePageSize"
              @current-change="changePageNum"
              :current-page="wjForm.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="wjForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cygjxService from "@/api/cygjx";
import jkglService from '@/api/jkgl'
export default {
  data() {
    return {
      fileList: [
        {
          name: "",
          url: "",
        },
      ],
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Tf_token: window.sessionStorage.getItem("token") },
        // 上传的地址
        url: window.BASEURL + "/fpi/wjfw/upload",
      },
      //文件列表
      tableData: [],
      total: 0,
      //文件表单
      wjForm: {
        pageNum: 1,
        pageSize: 10,
        filter: {
          gjc: "",
        },
      },
      wjFormRules: {
        // gjc: [{ required: true, trigger: "blur", message: "请输入文件名" }],
      },
      wjTextarea: "",
      //端口表单
      dkForm: {
        dkh: "",
        ipdz: "",
      },
      dkFormRules: {
        dkh: [{ required: true, trigger: "blur", message: "请输入端口号" }],
        ipdz: [{ required: true, trigger: "blur", message: "请输入IP地址" }],
      },
      dkTextarea: "",
      //PING表单
      wlForm: {
        filter: {
          gjc: '',
          jkflbh: '',
        },
        orderby: "",
        pageNum: 1,
        pageSize: 999
      },
      wlSelectData: '',
      wlSelectList: [],
      // wlFormRules: {
      //   ipdz: [{ required: true, trigger: "blur", message: "请输入IP地址" }],
      // },
      wlTextarea: "",
      //初始加载tab
      activeName: "first",
      //工具名称
      gjmc: "",
      // 工具分类
      gjflList: [
        { gjmc: "网络检测", id: 0 },
        { gjmc: "帮助文档", id: 1 },
      ],
      // 能力列表
      nlList: [],

      total: 0,
    };
  },
  mounted() {
    //默认选择
    this.gjmc = "网络检测";
    this.indexMethod();
  },
  methods: {
    //表格排序
    indexMethod(index) {
      return index + 1;
    },
    //上传文件
    handleFileSuccess(res) {
      // console.log(res.data.wjbh);
      const params = { wjbhList: [res.data.wjbh] };
      cygjxService
        .uploadWd(params)
        .then((res) => {
          // console.log(res);
          this.$message({
            type: "success",
            message: "上传成功!",
          });
          this.wjSubmit();
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //删除文件
    handleSc(data) {
      this.$confirm(`是否删除当前文件？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = { wjbhList: [data.wjbh] };
          cygjxService
            .deleteWd(params)
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });

              this.wjSubmit();
            })
            .catch((err) => {
              !err.isError &&
                this.$message({ type: "warning", message: err.message });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //下载文件
    handleXz(data) {
      window.open(window.BASEURL + "/fpi/wjfw/download?wjbh=" + data.wjbh);
    },
    //端口检测提交
    dkSubmit() {
      this.$refs.dkForm.validate((valid) => {
        if (valid) {
          const params = { ...this.dkForm };
          cygjxService
            .executeDkjc(params)
            .then((res) => {
              if (res) {
                this.dkTextarea = "检测通过";
              } else {
                this.dkTextarea = "检测未通过";
              }
            })
            .catch((err) => {
              !err.isError &&
                this.$message({ type: "warning", message: err.message });
            });
        }
      });
    },
    //PING检测提交
    wlSubmit() {
      this.$refs.wlForm.validate((valid) => {
        if (valid) {
          const params = { ...this.wlForm }
          jkglService
            .queryJkdy(params)
            .then(res => {
              // this.total = res.total
              this.wlSelectData = '';
              this.wlSelectList = res.list

              if (!this.wlSelectList || this.wlSelectList.length == 0) {
                this.getPingStatus();
              }

            })
            .catch(err => {
              !err.isError &&
                this.$message({ type: 'warning', message: err.message })
            })
        }
      });
    },
    getPingStatus() {
      let params = { ipdz: this.wlSelectData };
      // if (!this.wlSelectList || this.wlSelectList.length == 0) {
      //   params = { ipdz: this.wlForm.filter.gjc };
      // } else {
      //   params = { ipdz: this.wlForm.filter.gjc || this.wlSelectData };
      // }
      cygjxService
        .executeWljc(params)
        .then((res) => {
          if (res && res.length > 0) {
            this.wlTextarea = `${res[0].dz}服务${res[0].sfcg ? '在线' : '不在线'},网络延时为${res[0].wlys ? res[0].wlys : '0'}`;
          } else {
            this.wlTextarea = "检测未通过";
          }
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //文件提交
    wjSubmit() {
      const params = { ...this.wjForm };
      cygjxService
        .queryWdlb(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
          this.tableData.forEach(item => {
            if (item.fbrybm === this.$store.state.personInfo.rybm) {
              item['isDelete'] = true;
            } else {
              item['isDelete'] = false;
            }
          })
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //切换tab重置
    tabChange() {
      this.wlForm = {
        filter: {
          gjc: '',
          jkflbh: '',
        },
        orderby: "",
        pageNum: 1,
        pageSize: 999
      };

      this.dkForm = {
        dkh: "",
        ipdz: "",
      };
      this.dkTextarea = "";
      this.wlTextarea = "";
    },
    //分页
    changePageNum(val) {
      this.wjForm.pageNum = val;
      this.wjSubmit();
    },
    //分页
    changePageSize(val) {
      this.wjForm.pageSize = val;
      this.wjForm.pageNum = 1;
      this.wjSubmit();
    },
    //tab切换
    handleClick(tab) {
      // console.log(tab.index);
      this.tabChange();
    },
    //查询文档列表
    getWdList() {
      const params = { ...this.wlForm };
      cygjxService
        .executeWljc(params)
        .then((res) => {
          if (res) {
            this.wlTextarea = "检测通过";
          } else {
            this.wlTextarea = "检测未通过";
          }
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /* 点击分类树 */
    checkRow(item) {
      // console.log(item);
      this.gjmc = item.gjmc;
      if (item.gjmc === "帮助文档") {
        this.wjSubmit();
      }
    },

    /*
     * 查看详情
     */
    clickRow(type, data) {
      if (type === "look") {
        this.$router.push({
          path: "/nlxq",
          query: {
            cs: data.jkbh,
          },
        });
      }
    },
    wlFilter(val) {
      const params = {
        filter: {
          gjc: val,
          jkflbh: '',
        },
        orderby: "",
        pageNum: 1,
        pageSize: 999
      }
      jkglService
        .queryJkdy(params)
        .then(res => {
          // this.total = res.total
          this.wlSelectList = res.list
          if (!res.list || res.list.length === 0) {
            this.wlSelectData = val;
          }
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  .left {
    width: 350px;
    min-height: 500px;
    background-color: #ffffff;
    border: solid 1px #cecece;
    float: left;
    .nl-item {
      height: 40px;
      border-bottom: solid 1px #cecece;
      color: #666666;
      line-height: 40px;
      cursor: pointer;
      .gjmc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .img {
        width: 16px;
        height: 16px;
        float: left;
        margin: 12px;
      }
    }
    .gj-item-active {
      background-color: #e6f7ff;
      color: #006cff;
      border-right: 4px solid #007eff;
      box-sizing: border-box;
    }
  }
  .right {
    background-color: #fff;
    width: calc(100% - 380px);
    min-height: 500px;
    float: left;
    margin-left: 30px;
    .wljcBox {
      height: 500px;
      width: 100%;

      .dkjcBox {
        padding: 20px;
        height: 460px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        .bottom {
          width: 60%;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .bzwdBox {
      height: 100%;
      width: 100%;
      padding: 20px;
    }
  }

  .page {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
